import React from 'react';
import {
    Divider,
    ColorPicker,
    InputNumber,
    Select
} from 'antd'
import { themeStore } from '../Config/zustand'
import { BoxShadowMapping } from '../Config/theme'


const SetSystemBODY = () => {
    const { body, updateBody } = themeStore()

    const { bodyBack, bodyPx, bodyRadio, boxShadow } = body
    const BodyFunc = (key, value) => {
        body[key] = value
        updateBody(body)
    }

    return (
        <div className='SetSystemBODY'>
            <Divider orientation="left" >内容区设置</Divider>
            <div className='Content'>
                <div>
                    <div className='title'>主体区域</div>
                    <div className='Label'>
                        <div>背景颜色</div>
                        <ColorPicker value={bodyBack} onChangeComplete={e => BodyFunc('bodyBack', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>高斯比例</div>
                        <InputNumber value={bodyPx} onChange={e => BodyFunc('bodyPx', e)} />
                    </div>
                    <div className='Label' >
                        <div>底部圆角</div>
                        <InputNumber value={bodyRadio} onChange={e => BodyFunc('bodyRadio', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字倾斜</div>
                        <Select value={boxShadow} options={BoxShadowMapping} onChange={e => BodyFunc('boxShadow', e)} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SetSystemBODY;